<template>
  <div class="coverLayer">
    <div class="deleteBox">
      <div class="titleBox">
        <span>删 除 确 认</span>
      </div>
      <div class="contentBox">
        <span>您确认要删除当前数据吗？</span>
      </div>
      <div class="btnBox">
        <div class="cancelBox">
          <slot name="cancel"></slot>
          <!--使用方法 <button>取 消</button> -->
        </div>
        <div class="affirmBox">
          <slot name="affirm"></slot>
          <!-- 使用方法 <button>确 认</button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang='scss' scoped>
.coverLayer {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  .deleteBox {
    width: 60rem;
    height: 30rem;
    background-color: #ffffff;
    border-radius: 1.6rem;
    .titleBox {
      width: 100%;
      height: 7rem;
      border-top-left-radius: 1.2rem;
      border-top-right-radius: 1.2rem;
      background-color: #0669b2;
      text-align: center;
      line-height: 7rem;
      span {
        font-size: 2.4rem;
      }
    }
    .contentBox {
      width: 100%;
      height: 12rem;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        font-size: 2.2rem;
        color: #333333;
        letter-spacing: 0.3rem;
      }
    }
    .btnBox {
      width: 100%;
      height: 9rem;
      display: flex;
      .cancelBox {
        justify-content: flex-end;
      }
      div {
        flex: 1;
        display: flex;
        align-items: center;
        button {
          width: 11rem;
          height: 5rem;
          background-color: #0669b2;
          border: none;
          color: #ffffff;
          font-size: 2rem;
          letter-spacing: 0.2rem;
          border-radius: 1rem;
          margin: 0 6rem;
          outline: none;
        }
      }
    }
  }
}
</style>